<router-outlet></router-outlet>

<div style="margin: 50px;">

  <div class="container" style="text-align:center">
    <div class="row">
      <div class="col-12 text-center">
        <h1>Angular Search using Debounce in RXJS 6</h1>
        <input type="text" #movieSearchInput class="form-control" placeholder="Type any movie name" />

      </div>
    </div>
    <div class="row" *ngIf="isSearching">
      <div class="col-12 text-center">

        <h4>Searching ... </h4>

      </div>
    </div>
    <div class="row">
      <ng-container *ngIf="apiResponse['Response'] == 'False'; else elseTemplate">

        <div class="col-12 text-center">
          <div class="alert alert-danger" role="alert">
            {{apiResponse['Error']}}

          </div>
        </div>

      </ng-container>
      <ng-template #elseTemplate>


        <div class="col-3" *ngFor="let movie of apiResponse['Search']">

          <div class="card" style="margin:5px;">
            <img class="card-img-top" src="{{movie['Poster']}}">
            <div class="card-body">
              <h5 class="card-title">{{movie['Title']}}</h5>
              <p class="card-text">Year: {{movie['Year']}}</p>
            </div>
          </div>
        </div>

      </ng-template>
    </div>
  </div>

</div>